<template>
	<view class="container-bg">
		<u-navbar leftIcon="" bg-color="#F6F7FB" placeholder safeAreaInsetTop>
			<template #center>
				<view class="shop-top pad-top-20">
					<view class="centerY pad-left-right-22 betweenX">
						<view class="my-font font-42 shrink">九州超市</view>
						<view class="centerY flex-w mar-left-40">
							<u-search @change="hanldeChange" :animation="true" class="search" :show-action="false"
								placeholder="搜索商品" v-model="keyword"></u-search>
						</view>
					</view>
					<view class="centerY betweenX tab-box">
						<view class="flex-w">
							<u-tabs :current="current" @click="hanldeTab" lineColor="#df0007"
								:activeStyle="{ color: '#df0007',fontSize: '32rpx' }" :list="tabList"></u-tabs>
						</view>
						<view class="centerXY columnY shrink" @click="hanldeIsPro">
							<image class="recommend"
								:src="isPro ?  '../../static/shop/recommend_active.png': '../../static/shop/recommend.png'">
							</image>
							<view class="font-24" :class="isPro ? 'color-theme' : ''">推荐</view>
						</view>
					</view>
				</view>
			</template>
		</u-navbar>

		<u-swiper @click="hanldeSwiper" radius="0" :list="swiperList" indicator circular keyName="img_url"
			height="750rpx"></u-swiper>

		<view class="pad-30 mar-top-30" v-if="collection_inlet == 1 && colleList.length > 0">
			<view class="font-32 title">数字艺术</view>
			<view class="bg-white mar-top-30 pad-top-30 pad-left-right-30">
				<u-scroll-list>
					<view class="digit" @click="hanldeGoodsList" v-for="(item, index) in colleList" :key="index">
						<image class="goods" :src="item.goods_info.cover"></image>
						<view class="text-center">
							<view class="font-28 mar-top-10 multi1">{{item.goods_info.name}}</view>
							<view class="centerXY mar-top-10 font-28">
								<view class="color-theme">￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>


		<view class="pad-30">
			<view class="font-32 title">商品列表</view>
			<shop-list @click="hanldeShopInfo" :list="list" class="mar-top-30"></shop-list>
			<u-loadmore margin-top="30" v-if="list.length > 0" :status="pageStatus" color="#df0007"
				iconColor="#df0007" />
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		allOfPos,
		productCate,
		productList,
		goodsSaleList,
		configIndex
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 当前页面
				routePath: '/pages/shopmall/shop',
				// 首页轮播
				swiperList: [],
				// 分类数据
				tabList: [],
				ps: 10,
				page: 1,
				// 加载中状态
				pageStatus: 'loadmore',
				// 列表数据
				list: [],
				// 分类id
				cate_id: '',
				// 是否推荐
				isPro: false,
				// 激活tab
				current: 0,
				// 搜索
				keyword: '',
				// 藏品列表
				colleList: [],
				// 后台page参数
				pageData: {},
				// 是否开启数字入口
				collection_inlet: 0
			}
		},
		// 初始化
		onLoad() {
			this.getBanner();
			this.getListShop();
			this.getProductCate();
			this.getDataList();

			// 拉下注册
			this.getQueryVariable().then(res => {
				// 判断是有参数，
				if (JSON.stringify(res) != '{}') {
					// 存储
					uni.setStorageSync('code', res.code);
					// 判断是否登录 没有登录
					if (uni.getStorageSync('token') === '') {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/my/register'
							})
						}, 200)
					}
				}
			});

			// 页面初始化
			configIndex({
				code_arr: ['collection_inlet'],
			}).then(res => {
				this.collection_inlet = res.data.collection_inlet;
			})
		},
		onShow() {
			// tabBar
			this.$base.shopTabBar();
		},
		// 上拉加载更懂
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getListShop();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getListShop();
		},
		methods: {
			// 轮播图跳转
			hanldeSwiper(inx) {
				let url = this.banner[inx].jump;
				// 站内页面
				if (url.substring(0, 6) == '/pages') {
					uni.navigateTo({
						url: url
					})
				} else {
					// 站外页面
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/web-view/web-view?url=' + url
					})
					// #endif
					// #ifdef H5
					window.location.href = url
					// #endif
				}
			},
			// 跳转数字首页
			hanldeGoodsList() {
				uni.setStorageSync('path', this.routePath);
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 获取藏品列表
			getDataList() {
				let data = {
					ps: 10,
					page: 1
				}
				goodsSaleList(data).then(res => {
					let {
						data
					} = res;
					this.colleList = data.data
				})
			},
			// 获取url参数
			getQueryVariable() {
				return new Promise((resole, reject) => {
					let url = location.href
					let myParams = {}
					if (url.indexOf("?") !== -1) {
						let code = url.substr(0, url.indexOf("#"));
						let str = ''
						if (code.indexOf("?") === -1) {
							code = url.substr(url.indexOf("#") + 1);
							str = code.substr(code.indexOf("?") + 1);
						} else {
							str = code.substr(code.indexOf("?") + 1);
						}
						let strs = str.split("&");
						for (let i = 0; i < strs.length; i++) {
							myParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
						}
					}
					resole(myParams)
				})
			},
			// 跳转详情
			hanldeShopInfo(item) {
				uni.navigateTo({
					url: '/pages/shopmall/shopInfo?id=' + item.id
				})
			},
			// tab切换
			hanldeTab(item) {
				this.cate_id = item.id;
				this.list = [];
				this.page = 1;
				this.getListShop();
			},
			// input 搜索
			hanldeChange(e) {
				this.keyword = e;
				this.list = [];
				this.page = 1;
				this.getListShop();
			},
			// 推荐
			hanldeIsPro() {
				this.isPro = !this.isPro;
				this.list = [];
				this.page = 1;
				this.getListShop();
			},
			// 获取列表
			getListShop() {
				let data = {
					ps: this.ps,
					page: this.page,
					cate_id: this.cate_id,
					is_pro: this.isPro ? 1 : '',
					s_name: this.keyword
				}
				productList(data).then(res => {
					this.pageStatus = 'loadmore';

					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);

					// 结束下拉刷新
					uni.stopPullDownRefresh();

					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			},
			//获取商品分类
			getProductCate() {
				productCate().then(res => {
					let {
						lists
					} = res.data;
					lists.unshift({
						name: '全部',
						id: ''
					})
					this.tabList = lists;
				})
			},
			// 获取轮播
			getBanner() {
				allOfPos({
					code: 'shop'
				}).then(res => {
					this.swiperList = res.data.lists;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-bg {
		min-height: 100vh;
		background: $uni-bg-page;

		::v-deep .u-navbar__content {
			height: 200rpx !important;
		}

		::v-deep .u-navbar__placeholder {
			height: 220rpx !important;
		}

		.shop-top {
			width: 100%;
		}

		::v-deep .u-scroll-list__scroll-view__content {
			gap: 30rpx;

			.uni-scroll-view {
				padding: 30rpx;
				box-sizing: border-box;
			}

		}

		.digit {
			background: $uni-bg-page;
			padding: 20rpx;
			box-sizing: border-box;

			.goods {
				display: block;
				width: 200rpx;
				height: 200rpx;
			}
		}

		.search {
			animation-name: example;
			animation-duration: 1s;
		}

		@keyframes example {

			from {
				transform: translateX(100%);
			}

			to {
				transform: translateX(0);
			}
		}

		.tab-box {
			padding: 10rpx 22rpx 22rpx 0;
		}

		::v-deep .u-cell {
			margin-left: 30rpx;
		}

		.recommend {
			width: 44rpx;
			height: 44rpx;
		}


		::v-deep .u-cell__body {
			padding: 30rpx 30rpx 30rpx 0;
		}

		.avatar-box {
			border: 2rpx solid #fff;
			border-radius: 50%;
		}

		.set {
			flex-shrink: 0;
			width: 60rpx;
			height: 60rpx;
		}

		.title {
			letter-spacing: 2rpx;
		}
	}
</style>